import ReactMarkdown from 'react-markdown'
import OperUnit from '@/components/operunit'
import config from '@/config/config'
import bfLike from '@/assets/images/beforeLike.svg'
import atLike from '@/assets/images/afterLike.svg'
import './detailcard.scss'

const wls = window.localStorage
const api = config.api
const baseURL = api.baseURL
const post = api.post
const categoryList = config.head.navi
const postURL = [api.baseURL, api.post.base].join('')

function ReRplayUnit(props: any) {
  return (
    <div className='nested-reply_reply-unit'>
      <div className='reply-unit_header'>
        <div className='header_avatar' style={{backgroundImage: `url(${props.item.avatar})`}}/>
        <div className='header_nickname'>{props.item.nickname}</div>
        {props.item.post.userId === parseInt(wls.XB_id) ?
          <div className='header_delete' onClick={props.delete}>删除回复</div> : ''}
      </div>
      <div className='reply-unit_content'>
        <ReactMarkdown>{props.item.post.content}</ReactMarkdown>
      </div>
      <div className='reply-unit_footer'>
        <OperUnit
          className='replyer-oper'
          active={props.item.like}
          iconSrc={[bfLike, atLike]}
          value={props.item.post.likeCount}
          articleId={props.item.post.id}
          api={[postURL, api.post.like].join('')}
          method='post'
          note='回复点赞'
          iconStyle={{
            width: '20px',
            height: '20px',
            marginRight: '5px'
          }}/>
      </div>
    </div>
  )
}

export default ReRplayUnit
